<template>
	<view class="createpass">
		<HeaderBar :title="type==1?'导入钱包':'创建钱包'" showBack backgroundColor="#F6F6F6" fixed />

		<view class="contentBox">
			<!-- <form @submit="formSubmit" @reset="formReset"> -->
			<view class="form-item">
				<view class="title">设置钱包名</view>
				<view class="iptStyle name-ipt">
					<input class="input" name="input" v-model="name" :placeholder="placeholder"
						placeholder-style="color: #B2B2B2;font-size:24upx" maxlength="10"/>
				</view>
			</view>
			<view class="form-item">
				<view class="title f28">设置密码</view>
				<view class="iptStyle pass-ipt">
					<input class="input" :password="showPassword" v-model="password" name="input" placeholder="密码不少于8位(数字字母符号至少两种)"
						placeholder-style="color: #B2B2B2;font-size:24upx" />
					<uni-icons :type="showPassword?'eye':'eye-slash'" size="16" color="#368521" @click="changePassword"></uni-icons>
				</view>
				<view class="iptStyle confirm-pass-ipt">
					<input class="input" v-model="rePassword" :password="showrePassword" name="input" placeholder="确认密码"
						placeholder-style="color: #B2B2B2;font-size:24upx" />
					<uni-icons :type="showrePassword?'eye':'eye-slash'" size="16" color="#368521" @click="changerePassword"></uni-icons>
				</view>
			</view>
			<view class="form-item">
				<view class="title f28">提示信息</view>
				<view class="iptStyle name-ipt">
					<input class="input" name="input" v-model="tilp" placeholder="密码提示信息（可不填)"
						placeholder-style="color: #B2B2B2;font-size:24upx" />
				</view>
			</view>
			<label class="protocol">
				<view class="raido-box" @tap="toggleButton">
					<image src="../../static/images/login/radio-check.png" mode="" class="raido" v-if="checked">
					</image>
					<image src="../../static/images/login/radio.png" mode="" class="raido" v-else></image>
				</view>
				<view class="tilp">
					我已仔细阅读并同意<text>《<text class="text" @tap="protocol">用户协议</text>》</text>
				</view>
			</label>
			<view class="btn" :class="{'disabled':checked}">
				<view @tap="selectChain">
					创建钱包
				</view>
			</view>
			<!-- </form> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				type: "",
				name: "",
				password: "",
				rePassword: "",
				tilp: "",
				isOneAddress: true,
				config: {},
				showPassword: true,
				showrePassword: true,
			}
		},
		computed: {
			placeholder() {
				if (this.isOneAddress) {
					return "请输入钱包名称"
				} else {
					return this.config.name
				}
			}
		},
		onLoad(options) {
			this.type = options.type
			if (options.configStr) {
				const configStr = options.configStr || '';
				try {
					// 解码并反序列化 JSON 字符串
					const config = JSON.parse(decodeURIComponent(configStr));
					this.config = config
					this.isOneAddress = false
				} catch (error) {
					console.error('Failed to parse config:', error);
				}
			}

		},
		methods: {
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			changerePassword() {
				this.showrePassword = !this.showrePassword;
			},
			protocol() {
				uni.navigateTo({
					url: `/pages/protocol/protocol?id=3&title=用户协议`
				})
			},
			validatePassword(password) {
				const hasUpperCase = /[A-Z]/.test(password); // 是否包含大写字母
				const hasLowerCase = /[a-z]/.test(password); // 是否包含小写字母
				const hasNumbers = /\d/.test(password); // 是否包含数字
				const hasSpecialChars = /[!@#$%^&*(),.?":{}|<>]/.test(password); // 是否包含特殊字符
				const hasNoChineseChars = !/[\u4e00-\u9fa5]/.test(password); // 是否不包含汉字

				const conditionsMet = [hasUpperCase, hasLowerCase, hasNumbers, hasSpecialChars].filter(Boolean).length >=
					2;

				return password.length >= 8 && conditionsMet && hasNoChineseChars;
			},
			toggleButton() {
				this.checked = !this.checked;
			},
			selectChain() {
				if (!this.checked) {
					return uni.showToast({
						title: '请阅读并同意协议',
						position: "bottom",
						icon: "none",
						duration: 2000
					});
				}
				if (!this.name && this.isOneAddress) {
					return uni.showToast({
						title: '请输入名称',
						position: "bottom",
						icon: "none",
						duration: 2000
					});
				}
				if (!this.password) {
					return uni.showToast({
						title: '请输入密码',
						position: "bottom",
						icon: "none",
						duration: 2000
					});
				}
				if (this.password != this.rePassword) {
					return uni.showToast({
						title: '两次密码不一致',
						icon: "none",
						position: "bottom",
						duration: 2000
					});
				}
				if (!this.validatePassword(this.password)) {
					return uni.showToast({
						title: '密码格式有误',
						icon: "none",
						position: "bottom",
						duration: 2000
					});
				}
				if (this.isOneAddress) {
					let config = {
						address: "",
						privateKey: "",
						mnemonics: "",
						chainType: "",
						chainName: "",
						chainId: "",
						name: this.name,
						password: this.password,
						passwordTilp: this.tilp,
						importMethod: this.type
					}
					const configStr = encodeURIComponent(JSON.stringify(config));
					uni.navigateTo({
						url: `/pages/selectChain/selectChain?configStr=${configStr}`
					})
				} else {
					this.config.password = this.password
					const configStr = encodeURIComponent(JSON.stringify(this.config));
					uni.navigateTo({
						url: `/pages/createTilp/createTilp?configStr=${configStr}`
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.createpass {
		width: 100%;
		height: 100vh;
		background: #F6F6F6;
	}

	.contentBox {
		padding: 0 50upx;

		.form-item {
			margin-top: 30upx;

			.title {
				font-size: 30upx;
				color: #3D3D3D;
			}

			.f28 {
				font-size: 28upx;
			}

			.iptStyle {
				border-radius: 20upx;
				background-color: #FFFFFF;

				.input {
					padding: 26upx 24upx;
					font-size: 26upx;
					flex: 1;
				}
			}

			.name-ipt {
				margin-top: 26upx;
			}

			.pass-ipt {
				margin-top: 26upx;
				display: flex;
				align-items: center;
				.uni-icons{
					margin: 0 20upx;
				}
			}

			.confirm-pass-ipt {
				margin-top: 12upx;
				display: flex;
				align-items: center;
				.uni-icons{
					margin: 0 20upx;
				}
			}

		}

		.protocol {
			display: flex;
			align-items: center;
			margin-top: 72upx;

			.raido-box {
				display: flex;

				.raido {
					width: 32upx;
					height: 32upx;
				}
			}

			.tilp {
				color: #8E8E8E;
				font-size: 26upx;
				margin-left: 10upx;

				.text {
					color: #297814;
				}
			}
		}

		.mt {
			margin-top: 900upx;
		}

		.btn {
			font-size: 26upx;
			color: #F6F6F6;
			line-height: 88upx;
			background: linear-gradient(180deg, #CEF3D3 100%, #297814 61%);
			border-radius: 10upx;
			text-align: center;
			margin-top: 30upx;
		}

		.disabled {
			background: linear-gradient(180deg, #A9E993 0%, #368321 100%);
		}
	}
</style>